<template>
	<view class="y-flex" @tap="handleTap">
		<view class="y-flex page-padding-gap pt-20 pb-20 border-bottom-1"
		:style="{'border-bottom-color': borderColor}"
		v-if="images.length >= 3">
			<com-text size="32" :lines="cellTitleLines" line-height="30" :color="titleColor" :value="item.title"></com-text>
			<com-text class="mt-10" size="30" :lines="cellDescriptionLines" line-height="30" :color="textColor" :value="item.description" v-if="item.description"></com-text>
			<view class="y-flex y-row y-align-center mt-10">
				<image class="y-flex-1" style="height: 150rpx;" lazy-load :src="img" mode="aspectFill" v-for="(img, i) in images" :key="i"></image>
				<find-image :src="img"
				v-for="(img, i) in images" :key="i"
				lazy-load :style="{
					'width': _pixelunit(cellImageWidth),
					'height': _pixelunit(cellImageHeight)
				}" :border-radius="cellImageBorderRadius" mode="aspectFill" :tip-size="cellImageTipSize"></find-image>
			</view>
			<text class="fs-26 lines-1 mt-10" :style="{color: subtextColor}">{{item.subtitle}}</text>
		</view>
		<view class="y-flex y-row page-padding-gap pt-20 pb-20 border-bottom-1"
		:style="{'border-bottom-color': borderColor}" v-else>
			<find-image v-if="images[0]" :src="images[0]" :class="{'mr-10': item.title || item.description || item.subtitle}" lazy-load :style="{
				'width': _pixelunit(cellImageWidth),
				'height': _pixelunit(cellImageHeight)
			}" :border-radius="cellImageBorderRadius" mode="aspectFill" :tip-size="cellImageTipSize"></find-image>
			<view class="y-flex y-justify-between ml-20 y-flex-1" :class="{'mt-20': !images[0]}">
				<com-text size="32" :lines="cellTitleLines" line-height="30" :color="titleColor" :value="item.title"></com-text>
				<com-text class="mt-20" size="30" :lines="cellDescriptionLines" line-height="30" :color="textColor" :value="item.description" v-if="item.description"></com-text>
				<text class="fs-26 lines-1 mt-20" :style="{color: subtextColor}">{{item.subtitle}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	import FindImage from '../Image.vue'
	export default {
		name: 'ArticelCell',
		inject: ['getSkinColor', 'navigate'],
		components: { FindImage },
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			titleColor () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			},
			subtextColor () {
				return this.skinColor.color_5
			},
			borderColor () {
				return this.skinColor.color_gap_2
			},
			cellImageWidth () {
				return this.options.cellImageWidth || 230
			},
			cellImageHeight () {
				return this.options.cellImageHeight || 190
			},
			cellTitleLines () {
				return this.options.cellTitleLines || 1
			},
			cellImageBorderRadius () {
				return this.options.cellImageBorderRadius || 10
			},
			cellImageTipSize () {
				return this.options.cellImageTipSize || 20
			},
			cellDescriptionLines () {
				return this.options.cellDescriptionLines || 3
			},
			images () {
				return !this.item.images ? [] : typeof this.item.images == 'string' ? this.item.images.split(',') : this.item.images
			}
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			handleTap () {
				this.navigate(this.item.url)
			}
		}
	}
</script>

<style>
</style>